<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            height: 100%;
        }

        body {
            background: black;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            overflow: hidden;
        }

        /* GLASS */
        .glass {
            position: relative;
            width: 40vmin;
            outline: none;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        .glass svg {
            position: relative;
            z-index: 1;
            display: block;
            transform: translateZ(100vmin);
        }

        .glass .wrapper {
            position: absolute;
            left: 10.5%;
            right: 10.5%;
            top: 5%;
            bottom: -15%;
            transform: perspective(96vmin) rotateX(-30.8deg);
        }

        .glass .contents {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border-radius: 0 0 25% 25% / 0 0 10% 10%;
            overflow: hidden;
        }


        /* BEER */
        .glass .beer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 0;
            background-size: 100% 100%;
            animation-name: fill;
            background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1526092/beer.png');
            /* Had to use an image for the gradient because css linear gradients don't create a smooth enough ramp between stops for my liking. */
        }

        .glass .surface {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 100%;
            transform: scale(0);
            opacity: 1;
            animation-name: surface;
        }

        .glass .surface::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            padding-bottom: 15%;
            margin-top: -5%;
            border-radius: 50%;
            background: #000;
            opacity: 0.35;
        }

        .glass .surface::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            padding-bottom: 15%;
            margin-top: -7.5%;
            border-radius: 50%;
            background: #d39909;
        }

        @keyframes fill {
            0% {
                height: 0%;
            }

            100% {
                height: 89%;
            }
        }

        @keyframes surface {
            0% {
                transform: scale(0);
                opacity: 0;
            }

            10%,
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }


        /* BUBBLES */
        .glass .bubbles {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            overflow: hidden;
        }

        .glass .bubbles .layer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10%;
            padding-bottom: 200%;
            background-size: 100% auto;
            background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1526092/bubbles.png');
            background-repeat: repeat-y;
            -webkit-mask-image: linear-gradient(to top, transparent 20%, black 100%);
            animation-name: bubbly;
            animation-duration: 3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        .glass .bubbles .layer.more {
            transform: rotate(180deg);
            -webkit-mask-image: linear-gradient(to bottom, transparent 40%, black 100%);
            animation-direction: reverse;
            animation-duration: 3.5s;
            opacity: 0.65;
        }

        @keyframes bubbly {
            from {
                background-position-y: 100%
            }
        }


        .glass .head {
            position: absolute;
            z-index: 1;
            left: 0;
            right: 0;
            bottom: 100%;
            padding-bottom: 0%;
            opacity: 0;
            animation-name: fill-head;
            background: linear-gradient(to right, rgba(178, 178, 178, 1) 0%, rgba(235, 235, 235, 1) 50%, rgba(178, 178, 178, 1) 100%);
        }

        .glass .head::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding-bottom: 15%;
            border-radius: 50%;
            margin-bottom: -7.5%;
            background: linear-gradient(to right, rgba(178, 178, 178, 1) 0%, rgba(235, 235, 235, 1) 50%, rgba(178, 178, 178, 1) 100%);
        }

        .glass .head::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            padding-bottom: 15%;
            margin-top: -7.5%;
            border-radius: 50%;
            background: #f4f4f4;
        }

        @keyframes fill-head {
            0% {
                padding-bottom: 0%;
                opacity: 0;
            }

            35% {
                padding-bottom: 0%;
                opacity: 0;
            }

            45% {
                opacity: 1;
            }

            100% {
                opacity: 1;
                padding-bottom: 20.5%;
            }
        }

        .pour {
            position: absolute;
            z-index: 2;
            left: 50%;
            bottom: 0;
            width: 0;
            opacity: 0;
            height: 200%;
            transform: translateX(-50%);
            animation-name: pour-position;
            transition: 200ms;
        }

        .pour .stream {
            content: "";
            position: absolute;
            left: 50%;
            right: 0;
            top: 0;
            bottom: 0;
            transform: translateX(-50%);
            background: linear-gradient(to bottom, rgba(211, 153, 9, 0) 0%, rgba(211, 153, 9, 1) 20%, rgba(211, 153, 9, 1) 100%);
            animation-name: pour-opacity;
        }

        .pour .stream::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding-bottom: 25%;
            border-radius: 50%;
            background: #d39909;
            transform: translateY(50%);
        }

        @keyframes pour-position {
            0% {
                bottom: 0;
                margin-bottom: 0%;
                height: 200%;
            }

            35% {
                margin-bottom: 0%;
            }

            100% {
                bottom: 89%;
                margin-bottom: 20.5%;
                height: 50%;
            }
        }

        @keyframes pour-opacity {

            0%,
            96% {
                opacity: 1;
                width: 100%;
            }

            100% {
                opacity: 0;
                width: 0;
            }
        }


        .instructions {
            position: fixed;
            left: 50%;
            top: 50%;
            color: #fff;
            text-align: center;
            font-family: sans-serif;
            font-size: 3vmin;
            opacity: 0.5;
            text-transform: uppercase;
            transform: translate(-50%, -50%);
            animation-name: instructions;
        }

        @media (pointer: fine) {
            .instructions::before {
                content: "Click ";
            }
        }

        @media (pointer: coarse) {
            .instructions::before {
                content: "Tap ";
            }
        }

        @keyframes instructions {
            0%,
            15% {
                opacity: 0.5;
            }

            20%,
            100% {
                opacity: 0;
            }
        }


        /* DEFINE ANIMATION */

        .glass .beer,
        .glass .head,
        .glass .surface,
        .glass .pour,
        .glass .pour .stream,
        .instructions {
            animation-timing-function: cubic-bezier(.2, 0, .4, 1);
            animation-duration: 4s;
            animation-fill-mode: forwards;
            animation-play-state: paused;
        }


        /* ANIMATE FILL */
        @media (pointer: fine) {
            .glass:active .beer,
            .glass:active .head,
            .glass:active .surface,
            .glass:active .pour,
            .glass:active .pour .stream,
            .glass:active~.instructions {
                animation-play-state: running;
            }

            .glass:active .pour {
                width: 10%;
                opacity: 1;
            }
        }

        @media (pointer: coarse) {
            .glass:hover .beer,
            .glass:hover .head,
            .glass:hover .surface,
            .glass:hover .pour,
            .glass:hover .pour .stream,
            .glass:hover~.instructions {
                animation-play-state: running;
            }

            .glass:hover .pour {
                width: 10%;
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <div class="glass">
        <div class="wrapper">
            <div class="pour">
                <div class="stream"></div>
            </div>
            <div class="contents">
                <div class="beer">
                    <div class="bubbles">
                        <div class="layer"></div>
                        <div class="layer more"></div>
                    </div>
                    <div class="surface">
                        <div class="head"></div>
                    </div>
                </div>
            </div>
        </div>
        <svg viewBox="0 0 550 980">
            <style type="text/css">
                .st0 {
                    fill: url(#SVGID_1_);
                }

                .st1 {
                    fill: #FFFFFF;
                }

                .st2 {
                    opacity: 0.85;
                    fill: #FFFFFF;
                }

                .st3 {
                    opacity: 0.86;
                    fill: #FFFFFF;
                }

                .st4 {
                    opacity: 0.5;
                    fill: #FFFFFF;
                }

                .st5 {
                    fill: url(#SVGID_2_);
                }
            </style>
            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="399.6879" y1="462.5569" x2="516.6628"
                y2="462.5569">
                <stop offset="0.1021" style="stop-color:#FFFFFF;stop-opacity:0" />
                <stop offset="1" style="stop-color:#FFFFFF" />
            </linearGradient>
            <path class="st0"
                d="M399.69,81.11c39.58-2.26,83.23-10.35,104.66-14.72c6.71-1.37,12.84,4.07,12.28,10.89
            c-11.21,135.24-66.63,741.35-68.14,757c-1.57,16.27-35.15,24.66-35.15,24.66C439.56,549.38,399.69,81.11,399.69,81.11z" />
            <path class="st1" d="M507.67,73.32" />
            <path class="st2"
                d="M519.05,43.86c-19.85,4.57-40.18,6.98-60.48,8.99c-20.32,1.97-40.7,3.3-61.1,4.29
            c-40.79,1.98-85.04,2.97-122.48,2.97s-81.69-1-122.48-2.97c-20.39-0.99-40.78-2.32-61.1-4.29c-20.3-2.02-40.62-4.42-60.48-8.99
            l-0.42,1.67c19.92,5.04,40.25,9.5,60.57,11.97c20.34,2.41,40.74,4.2,61.16,5.63C193.11,66,235.57,67.88,275,67.88
            c39.43,0,81.89-1.88,122.74-4.75c20.42-1.43,40.83-3.22,61.16-5.63c20.32-2.47,40.65-6.92,60.57-11.97L519.05,43.86z" />
            <path class="st3" d="M333.03,908.96c-19.07-1.51-41.93-2.67-58.03-2.67s-38.96,1.16-58.03,2.67c-19.06,1.52-38.08,3.67-56.93,6.86
            l0.22,1.39c18.88-2.59,37.89-4.14,56.92-5.05c19.03-0.91,34.61-0.87,57.82-0.87s38.79-0.04,57.82,0.87
            c19.03,0.92,38.04,2.47,56.92,5.05l0.22-1.39C371.11,912.64,352.09,910.48,333.03,908.96z" />
            <path class="st4" d="M275,829.75c-32.91,0-89.08,3.57-132.66,10.66l0.21,1.39c43.66-5.88,95.72-7.05,132.45-7.05
            s88.79,1.17,132.45,7.05l0.21-1.39C364.08,833.32,307.91,829.75,275,829.75z" />
            <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="1108.0135" y1="462.5569" x2="1224.9884"
                y2="462.5569" gradientTransform="matrix(-1 0 0 1 1258.3256 0)">
                <stop offset="0.1021" style="stop-color:#FFFFFF;stop-opacity:0" />
                <stop offset="1" style="stop-color:#FFFFFF" />
            </linearGradient>
            <path class="st5"
                d="M150.31,81.11c-39.58-2.26-83.23-10.35-104.66-14.72c-6.71-1.37-12.84,4.07-12.28,10.89
            c11.21,135.24,66.63,741.35,68.14,757c1.57,16.27,35.15,24.66,35.15,24.66C110.44,549.38,150.31,81.11,150.31,81.11z" />
            <path class="st1" d="M42.33,73.32" />
            <path class="st1" d="M549.97,30.97c-0.02-0.6-0.13-1.13-0.27-1.67c-0.14-0.52-0.29-1.11-0.48-1.54c-0.38-0.87-0.85-1.8-1.32-2.4
            c-0.24-0.33-0.48-0.67-0.73-0.98l-0.71-0.77c-1.93-1.96-3.7-3.02-5.41-4C539.34,18.67,444.21,0,275,0S10.66,18.67,8.96,19.62
            c-1.7,0.98-3.47,2.04-5.41,4l-0.71,0.77c-0.25,0.3-0.49,0.65-0.73,0.98c-0.47,0.6-0.94,1.52-1.32,2.4c-0.2,0.43-0.35,1.02-0.48,1.54
            c-0.14,0.53-0.25,1.07-0.27,1.67C0,31.52-0.01,32.21,0.01,32.65l0.05,0.58l0.37,4.63l1.47,18.54c3.96,49.44,8.46,98.83,13.02,148.18
            c2.26,24.68,4.6,49.35,7,74.01l7.16,73.99l7.19,73.99l7.37,73.97L51,574.5l7.52,73.95l7.57,73.95l7.76,73.93l7.75,73.93l6.73,62.36
            c1.21,11.23,8.21,21.08,18.52,25.69C134.4,970.62,193.09,980,275,980s140.6-9.38,168.15-21.69c10.31-4.61,17.31-14.45,18.52-25.69
            l6.73-62.36l7.75-73.93l7.76-73.93l7.57-73.95L499,574.5l7.37-73.97l7.37-73.97l7.19-73.99l7.16-73.99c2.4-24.66,4.74-49.33,7-74.01
            c4.57-49.35,9.06-98.73,13.02-148.18l1.47-18.54l0.37-4.63l0.05-0.58C550.01,32.21,550,31.52,549.97,30.97z M13.75,33.43
            c-0.01,0.02-0.04,0.04-0.05,0.04C13.72,33.45,13.74,33.44,13.75,33.43C13.76,33.42,13.75,33.43,13.75,33.43z M14.16,31.57
            c0.01,0.04,0.03,0.2,0.03,0.35L14.16,31.57z M535.45,36.78l-1.42,18.52c-3.84,49.36-8.21,98.69-12.66,148.04l-13.3,148.05
            l-6.66,74.03l-6.51,74.05l-6.51,74.05l-6.36,74.06l-6.31,74.07l-6.11,74.08l-3.39,41.09h0c-1.33,16.12-11.67,26.49-44.15,38.94
            c-10.73,4.12-18.37,13.78-19.84,25.18c-1.01,7.86-2.1,15.18-3.42,22.87c-2.81,16.42-15.03,29.62-31.19,33.64
            c-24.33,6.05-58.46,10.27-92.61,10.27s-68.29-4.22-92.61-10.27c-16.16-4.02-28.38-17.22-31.19-33.64
            c-1.32-7.69-2.41-15.02-3.42-22.87c-1.46-11.4-9.1-21.06-19.84-25.18c-32.48-12.46-42.82-22.82-44.15-38.94h0l-3.39-41.09
            l-6.11-74.08l-6.31-74.07l-6.36-74.06l-6.51-74.05l-6.51-74.05l-6.66-74.03l-13.3-148.05c-4.45-49.35-8.83-98.68-12.66-148.04
            l-1.42-18.52l-0.29-3.8c0.39-0.31,0.96-0.69,1.59-1.05c1-0.57,2.2-1.12,3.43-1.65c5.05-2.08,10.86-3.66,16.67-5.03
            c5.84-1.38,11.81-2.52,17.81-3.56c12.03-2.02,24.18-3.78,36.39-5.25c12.21-1.5,24.48-2.66,36.76-3.85
            C176.07,8.05,226.65,4.23,275,4.23s98.93,3.82,148.08,8.36c12.28,1.19,24.55,2.35,36.76,3.85c12.21,1.47,24.37,3.24,36.39,5.25
            c6,1.04,11.97,2.19,17.81,3.56c5.81,1.37,11.62,2.95,16.67,5.03c1.23,0.53,2.43,1.07,3.43,1.65c0.63,0.36,1.2,0.74,1.59,1.05
            L535.45,36.78z M535.82,31.92c0-0.15,0.01-0.31,0.03-0.35L535.82,31.92z M536.25,33.43C536.25,33.43,536.24,33.42,536.25,33.43
            c0.01,0.01,0.03,0.02,0.05,0.04C536.29,33.47,536.25,33.45,536.25,33.43z" />
        </svg>
    </div>

    <div class="instructions">and<br />hold to pour</div>
</body>

</html>